import type { ColumnItem } from '@/components/gi-form/type'

/** 表单配置 */
export function useFormColumns() {
  const columns = computed<ColumnItem[]>(() => [
    {
      type: 'group-title',
      label: '基本信息',
      field: 'title-base',
    },
    {
      type: 'input',
      label: '姓名',
      field: 'name',
      rules: [
        { required: true, message: '请输入姓名' },
      ],
    },
    {
      type: 'input',
      label: '手机号',
      field: 'phone',
    },
    {
      type: 'textarea',
      label: '备注',
      field: 'remark',
    },
    {
      type: 'group-title',
      label: '分组标题2',
      field: 'title-group2',
    },
    {
      type: 'popout-input',
      label: '流程',
      field: 'wfStatus',
      props: {
        readonly: true,
        placeholder: '由系统自动生成',
      },
    },
    {
      type: 'popout-input',
      label: '只读文本',
      field: 'text',
      props: {
        readonly: true,
        multiline: true,
      },
    },
    {
      type: 'stepper',
      label: '步进器',
      field: 'num',
    },
    {
      type: 'datetime-picker',
      label: '时间',
      field: 'time',
    },
    {
      type: 'calendar',
      label: '日历',
      field: 'date',
    },
    {
      type: 'picker',
      label: '选择',
      field: 'sex',
      props: {
        columns: [
          {
            value: 'male',
            label: '男性',
          },
          {
            value: 'female',
            label: '女性',
          },
          {
            value: 'others',
            label: '其他',
          },
        ],
      },
    },
    {
      type: 'rate',
      label: '评分',
      field: 'star',
    },
    {
      type: 'switch',
      label: '状态',
      field: 'status',
    },
    {
      type: 'slider',
      label: '滑块',
      field: 'slider',
      hide: f => !f.status,
    },
    {
      type: 'radio-group',
      label: '单选按钮组',
      field: 'radio',
      props: {
        direction: 'horizontal',
        options: [
          { value: 'male', label: '男性' },
          { value: 'female', label: '女性' },
          { value: 'others', label: '其他' },
        ],
      },
    },
    {
      type: 'checkbox-group',
      label: '复选框组',
      field: 'checkbox',
      props: {
        direction: 'vertical',
        options: [
          { value: 'dy', label: '电影' },
          { value: 'yy', label: '音乐' },
          { value: 'lx', label: '旅行' },
        ],
      },
    },
    {
      type: 'upload',
      label: '附件',
      field: 'upload',
      props: {
        action: 'https://jsonplaceholder.typicode.com/posts/',
        name: 'file',
        accept: 'image',
        maxSize: 1024 * 1024 * 2,
        maxCount: 3,
        showUploadList: true,
        autoUpload: true,
      },
    },
  ])

  return { columns }
}
